<%--
  - Author		:	Jaewon Choi
  - Date			:
  - Description	:	
  --%>
<%@ page language="java" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/pages/includes/taglibs.jspf" %>
<%@ include file="/WEB-INF/pages/includes/variables.jspf" %>
<%@ include file="/WEB-INF/pages/includes/doctype.jspf" %>
<html>
	<head>
<%@ include file="/WEB-INF/pages/includes/metatags.jspf" %>
		<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
		<title><fmt:message key="pages.title" /></title>
		<style type="text/css">
			body {
				width: 100%;
				margin: 0;
				padding: 0;
				background: #F0F0EF;
			}
			.listTbl {
				width: 100%;
			}
			.moreBtn {
				background-position : 50%;
				background-repeat :  no-repeat;
				height: 40px;
			}
			
			.center {
				background: #F0F0EF;
			}
			
			#Left {position:absolute; top:0; left:0; width:20px;}
			#Center {margin:0 20px 0 20px;}
			#Right {position:absolute; top:0; right:0; width:20px;}
		
		</style>

		<script type="text/javascript" src="<c:url value="${dirScripts}/common.js" />"></script>
		<script type="text/javascript" src="<c:url value="${dirScripts}/jquery-1.7.2.min.js" />"></script>
		<script type="text/javascript">
			$(function() {
				if($("#listHtml").val() != ""){
					$("#dataBody").html($("#listHtml").val());
				}
			});
			
			function showDetail(obj){
				$(obj).next().toggle();
				var imgObj = $(obj).children().first().children().first(); 
				if($(obj).next().css("display")=="none"){
					$(imgObj).attr("width","10px");
					$(imgObj).attr("height","auto");
					$(imgObj).attr("src", "<c:url value="${dirImages}/btn_notice_arrow_off2.png" />");	
				}else{
					$(imgObj).attr("width","auto");
					$(imgObj).attr("height","10px");
					$(imgObj).attr("src", "<c:url value="${dirImages}/btn_notice_arrow_on2.png" />");
				}
			}
			
			function appListData(){
				$("#page").val(parseInt($("#page").val())+1);

				$.ajax({
					type: "POST",
					url: "<c:url value="/notice/appListData" />",
					dataType: "html",
					async: false,
					data: $("#searchFrm").serialize(),
					success: function(data){
						if(data.replace(/\s/g, '') != ""){
							$("#dataBody").append(data);
						}else{
							$("#page").val(parseInt($("#page").val())-1);
						}

						$("#listHtml").val($("#dataBody").html());
					},
					beforeSend: function(){
					},
					error: function(jqXHR, textStatus, errorThrown){
						//alert(jqXHR.responseText); //에러 페이지 내용
						alert("오류가 발생하였습니다.\n관리자에게 문의 바랍니다.");
					},
					complete: function(){
					}
				 });
			}
		</script>
	</head>
	<body>
		<div id="Left">&nbsp;</div>
		<div id="Center" class="center">
			<div>
			공지사항
			</div>
				<table class="listTbl" border="0" style="border-spacing: 0;">
				<colgroup>
					<col width="50px" />
					<col width="*" />
				</colgroup>
				<tbody id="dataBody">
					<c:forEach items="${noticeList}" var="notice" varStatus="noticeStat">
						<tr onclick="javascript:showDetail(this);">
							<td style="background: #FFFFFF;border-width: 1px; border-color:#b0b0b0; border-style:solid; height: 54px; text-align: center;">
								<img src="<c:url value="${dirImages}/btn_notice_arrow_off2.png" />" width="10px">
							</td>
							<td style="background: #dbdbdb;border-width: 1px; border-color:#b0b0b0; border-style:solid;padding-left:10px;">
								<font style="color: #0F0F0F; font-size: 15px;font-weight: bold;">${notice.title}</font>
								<font style="color: #799EB7; font-size:12px;font-weight: bold;">
									<c:catch var="e">
										<fmt:parseDate var="createdTime" pattern="yyyy-MM-dd HH:mm:ss" value="${notice.createdTime}" />
										<fmt:formatDate value="${createdTime}" pattern="MM/dd" />
									</c:catch>
									<c:if test="${not empty e}">
										${notice.createdTime}
									</c:if>
								</font>
							</td>
						</tr>
						<tr style="display:none;">
							<td colspan="2" style="background: #e3e3e3; font-size:15px;border: 1px solid #b0b0b0; padding: 5px 20px;">
								${notice.cont}
								<c:if test="${not empty notice.imgUrl}">
									<br />
									<img src="<c:out value="${notice.imgUrl}" />" style="max-width: 90%;" />
								</c:if>
							</td>
						</tr>
					</c:forEach>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="2" class="moreBtn" onclick="javascript:appListData();" style=" text-align: center;">
							<font style="color: #0F0F0F; font-size: 15px;font-weight: bold;">더 보기</font>
						</td>
					</tr>
				</tfoot>
			</table>
			<form id="searchFrm" name="searchFrm" style="display: none;">
				<input type="hidden" name="maxnum" value="${maxnum}" />
				<input type="hidden" id="page" name="page" value="${page}" />
				<input type="hidden" name="appType" value="${param.appType}" />
				<input type="hidden" name="gubun" value="${param.gubun}" />
			</form>
			<form id="actionFrm" name="actionFrm" action="<c:url value="/notice/appForm" />" method="post" style="display: none;">
				<input type="text" name="maxnum" value="${maxnum}" />
				<input type="text" id="page" name="page" value="${page}" />
				<input type="text" name="appType" value="${param.appType}" />
				<input type="text" name="gubun" value="${param.gubun}" />
				<input type="text" name="id" value="" />
			</form>
			<textarea id="listHtml" style="display: none;"></textarea>    		
		</div>
		<div id="Right">&nbsp;</div>
		
	</body>
</html> 